<template>
  <div class="detail-container" v-loading="isLoading">
    <Layout v-if="!isLoading">
      <BlogDetail v-if="data" :blog="data" />
      <template v-if="data" #right>
        <BlogTOC :toc="data.toc" />
      </template>
    </Layout>
  </div>
</template>

<script>
import Layout from "../components/Layout.vue";
import BlogDetail from "../components/BlogDetail.vue";
import BlogTOC from "../components/BlogTOC.vue";
import { getBlog } from "../api/blog.js";
import { setPageTitle } from "../utils/setTitle.js";

export default {
  components: {
    Layout,
    BlogDetail,
    BlogTOC,
  },
  data() {
    return {
      isLoading: false,
      data: null,
    };
  },
  async created() {
    this.isLoading = true;
    var resp = await getBlog(+this.$route.params.blogId);
    if (!resp) {
      this.$router.push("/404");
      return;
    }
    this.data = resp;
    setPageTitle(this.data.title);
    this.isLoading = false;
  },
};
</script>

<style lang="less" scoped>
.detail-container {
  width: 100%;
  height: 100%;
}
</style>